<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600px" height="400px">

    </canvas>
    <script>
        const canvas = document.querySelector("canvas");
        
        const ctx = canvas.getContext("2d");
        
        //1.创建渐变(起点x,起点y,终点x,终点y)
        let gradient = ctx.createLinearGradient(0,0,600,400);
        //设置 起点 颜色
        gradient.addColorStop(0,"red");
        //设置终点颜色 （0-1 表示 从开始到结束）
        //需要多个颜色 可以在 中间部分加颜色
        gradient.addColorStop(0.5,"yellow");
        gradient.addColorStop(1,"blue");
       
        ctx.moveTo(0,0);
        ctx.lineTo(600,400);
        ctx.lineWidth = 20;
        ctx.strokeStyle = gradient;
        ctx.fillStyle =gradient;
        ctx.fillRect(0,0,255,255);
    
    </script>
</body>
</html>